<template>
  <div class="page pb-100">
    <!-- 顶部栏 -->
    <van-nav-bar
      left-arrow
      arrow-color="white"
      :title="$t('收货地址')"
      :border="false"
      @click-left="router.back"
    >
    </van-nav-bar>

    <!-- 收货地址列表 -->
    <ul class="container pt-0" v-if="addresses.length">
      <li
        class="box lh-2 rel click mb-15"
        v-for="(v, i) in addresses"
        :key="i"
        @click="selectAddress(v)"
      >
        <div class="flex">
          <div>{{ $t('收货人') }}：</div>
          <div>{{ v.name }}</div>
        </div>
        <div class="flex">
          <div>{{ $t('电话') }}：</div>
          <div>{{ v.tel }}</div>
        </div>
        <div class="flex">
          <div>{{ $t('地址') }}：</div>
          <div>{{ v.address }}</div>
        </div>

        <!-- 操作 -->
        <div class="action flex">
          <div
            class="cl-success click mr-10"
            @click.stop="showEditDialog(v, 'edit')"
          >
            {{ $t('编辑') }}
          </div>
          <div class="cl-error click" @click.stop="delAddress(v)">
            {{ $t('删除') }}
          </div>
        </div>
      </li>
    </ul>

    <van-empty :description="$t('暂无数据')" v-else></van-empty>

    <!-- 新增、编辑收货地址 -->
    <van-popup v-model:show="addressVisible">
      <div class="popup">
        <!-- 收货地址 -->
        <div class="mb-15">
          <div class="flex flex-cc mb-10">
            <div class="flex-fs-0" style="width: 60px">
              {{ $t('收货人') }}：
            </div>
            <van-field class="flex-1" v-model="address.name"></van-field>
          </div>
          <div class="flex flex-cc mb-10">
            <div class="flex-fs-0" style="width: 60px">{{ $t('电话') }}：</div>
            <van-field
              class="flex-1"
              type="tel"
              v-model="address.tel"
            ></van-field>
          </div>
          <div class="flex flex-cc">
            <div class="flex-fs-0" style="width: 60px">{{ $t('地址') }}：</div>
            <van-field class="flex-1" v-model="address.address"></van-field>
          </div>
        </div>

        <div class="flex flex-rc">
          <van-button
            style="width: 100px"
            type="primary"
            round
            @click="submitForm"
          >
            {{ $t('确定') }}
          </van-button>
        </div>
      </div>
    </van-popup>

    <!-- 底部栏 -->
    <div class="footer p-15">
      <van-button type="primary" block @click="showEditDialog({}, 'add')">{{
        $t('新增收货地址')
      }}</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import mitt from 'js/mitt'
import { showSuccess } from 'js/utils'
import apis from 'js/apis'

const router = useRouter()

// 收货地址
const addresses = ref([])

// 收货地址表单
const address = ref({})
const addressMode = ref('add')
const addressVisible = ref(false)

getAddressList()

// 获取地址列表
async function getAddressList() {
  const { code, data } = await apis.getAddressList()

  if (code === 1) {
    addresses.value = data
  }
}

// 提交表单
async function submitForm() {
  const params = {
    name: address.value.name,
    tel: address.value.tel,
    address: address.value.address,
  }

  if (addressMode.value === 'edit') {
    params.id = address.value.id
  }

  const { code } =
    addressMode.value === 'edit'
      ? await apis.editAddress(params)
      : await apis.addAddress(params)

  if (code === 1) {
    addressVisible.value = false
    showSuccess($t('操作成功'))
    getAddressList()
  }
}

// 删除地址
async function delAddress(v) {
  const params = {
    id: v.id,
  }

  const { code } = await apis.delAddress(params)

  if (code === 1) {
    showSuccess($t('操作成功'))
    getAddressList()
  }
}

// 显示编辑弹窗
function showEditDialog(v, mode = 'add') {
  address.value = { ...v }
  addressVisible.value = true
  addressMode.value = mode
}

// 选择地址
function selectAddress(v) {
  localStorage.setItem('address', JSON.stringify(v))
  mitt.emit('selectAddress', v)
  router.back()
}
</script>

<style lang="scss" scoped>
.page {
  background: url('/page_bg.png') no-repeat center / cover;

  .action {
    position: absolute;
    top: 15px;
    right: 10px;
  }
}
</style>
